<style scoped lang="scss">
/* 复用原样式（保持不变） */
@import "@/styles/_variables.scss";
@import "@/styles/_mixins.scss";

.user {
  width: 10rem;
  height: 100vh;
  overflow: hidden;

  .user-header {
    width: 10rem;
    height: 22.5vh;
    background-color: pink;
    transition: height 0.5s ease, transform 0.5s ease;
    transform-origin: top center;
    overflow: hidden;

    img {
      width: 10rem;
      height: 22.5vh;
      object-fit: cover;
      transition: height 0.5s ease;
    }
  }

  .user-edit-btn {
    position: absolute;
    top: .3rem;
    right: .3rem;
    width: .8rem;
    height: .8rem;
    border-radius: 50%;
    background: rgba(22, 24, 35, 0.6);
    font-size: .4267rem;
    color: $color-white;
    cursor: pointer;
    @include flex-center;

    span {
      width: .8rem;
      height: .8rem;
      @include flex-center;
      margin-bottom: .2333rem;
    }
  }

  .user-info {
    width: 10rem;
    height: 77.5vh;
    background-color: #161622;
    position: relative;
    color: $color-white;

    .user-avatar {
      width: 2.1333rem;
      height: 2.1333rem;
      margin: 0 auto;
      border-radius: 50%;
      overflow: hidden;
      background: #161622;
      padding: .1333rem;
      position: absolute;
      top: -.4rem;
      left: .5rem;

      img {
        width: 2.1333rem;
        height: 2.1333rem;
        object-fit: cover;
        border-radius: 50%;
      }
    }

    .user-name {
      padding-top: 2rem;

      h6 {
        font-size: .5333rem;
        margin-left: .5rem;
        font-weight: 700;
      }

      p {
        font-size: .32rem;
        margin-left: .5rem;
        font-weight: 400;
      }
    }

    .user-signature {
      width: 9.5rem;
      margin: 0 auto;
      border-top: 1px solid #222222;
      margin-top: .2rem;
      padding-top: .2rem;

      p {
        font-size: .3733rem;
        font-weight: 400;
        color: #8b8c96;
      }

      span {
        margin-top: .2rem;
        width: auto;
        height: .2667rem;
        display: inline-block;
        background-color: #43333fb3;
        padding: .1333rem .2133rem;
        border-radius: .1333rem;
        font-size: .2667rem;
        text-align: center;
        display: flex;
        align-items: center;
        color: #8b8c96;

        i {
          color: #da6969;
          font-size: .2667rem;
          margin-right: .1rem;
        }
      }
    }

    .user-follow {
      width: 5.3333rem;
      height: .4rem;
      margin-left: 0.25rem;
      margin-top: .2rem;
      @include flex-space-between-center;

      .user-follow-item {
        height: .3733rem;
        display: flex;
        font-size: .3733rem;
        cursor: pointer;

        span {
          margin-left: .1rem;
          color: #8b8c96;
        }
      }
    }

    .user-dynamic {
      width: 10rem;
      height: 1.12rem;
      display: flex;
      margin-top: .2667rem;
      font-size: .4267rem;
      position: relative;

      .user-dynamic-item {
        width: 3.3333rem;
        height: 1.12rem;
        @include flex-center;
        cursor: pointer;

        span {
          color: #8b8c96;
          margin-right: .1rem;
        }
      }

      .user-follow-line {
        bottom: 0;
        left: 0;
        width: 3.3333rem;
        height: .0533rem;
        background-color: #face15;
        position: absolute;
        top: 1.12rem;
        transition: all .3s;
        z-index: 999;
      }
    }
  }

  .more-menu {
    width: 2.1333rem;
    height: 2.3467rem;
    background: rgba(22, 24, 35, 0.6);
    position: absolute;
    top: 2.4rem;
    right: .3rem;
    opacity: 0;
    z-index: 9;
    transition: all 1s;

    .more-menu-item {
      width: 2.1333rem;
      height: 1.1733rem;
      font-size: .2933rem;
      color: $color-white;
      cursor: pointer;
      @include flex-center;
      transform: translateY(0);
      transition: all 1s;
    }
  }
}

.more-menu-item-active {
  transform: translateY(-1rem);
  transition: all 1s;
  opacity: 1 !important;
}
</style>
<template>
  <div class="user">
    <!-- 右上角操作菜单 -->
    <div class="more-menu" :class="{ 'more-menu-item-active': isMenuActive }">
      <div class="more-menu-item" @click="$emit('menu-click', 'edit')">
        修改个人信息
      </div>
      <div class="more-menu-item" @click="$emit('menu-click', 'logout')">
        退出登录
      </div>
    </div>

    <!-- 主内容区（含滑动缩放） -->
    <div class="user-box" :style="{ transform: `translateY(${swipeY}px)` }" ref="userBoxRef">
      <!-- 头部背景图 -->
      <div class="user-header" :style="{
        height: `${22.5 * bgScale}vh`,
        transform: `scale(${bgScale})`,
        transformOrigin: 'center center'
      }">
        <img :src="userInfo.bgImg || defaultBgImg" alt="背景图" :style="{ height: `${22.5 * bgScale}vh` }">
      </div>

      <!-- 右上角菜单按钮 -->
      <div class="user-edit-btn" @click="isMenuActive = !isMenuActive">
        <span>
          <p>...</p>
        </span>
      </div>

      <!-- 个人信息区 -->
      <div class="user-info">
        <!-- 头像 -->
        <div class="user-avatar">
          <img :src="userInfo.userAvatar ? `${imgBaseUrl}${userInfo.userAvatar}` : defaultAvatar" alt="用户头像">
        </div>

        <!-- 名称和ID -->
        <div class="user-name">
          <h6>{{ userInfo.userNickname }}</h6>
          <p>抖音号：{{ userInfo.userId }}</p>
        </div>

        <!-- 个性签名和基本信息 -->
        <div class="user-signature">
          <p>{{ userInfo.userDesc || '暂无个性签名' }}</p>
          <span v-if="userInfo.userAge || userInfo.userGender">
            <i class="iconfont" :class="userInfo.userGender === '女' ? 'icon-nv' : 'icon-nan'"></i>
            {{ userInfo.userAge }}岁 {{ userInfo.userGender }}
          </span>
        </div>

        <!-- 统计数据（获赞/关注/粉丝） -->
        <div class="user-follow">
          <div class="user-follow-item">
            <p>{{ userInfo.likesNum || 0 }}</p>
            <span>获赞</span>
          </div>
          <div class="user-follow-item" @click="$emit('click-follows')">
            <p>{{ userInfo.followersNum || 0 }}</p>
            <span>关注</span>
          </div>
          <div class="user-follow-item" @click="$emit('click-fans')">
            <p>{{ userInfo.fansNum || 0 }}</p>
            <span>粉丝</span>
          </div>
        </div>

        <!-- 内容标签切换（作品/动态/喜欢） -->
        <div class="user-dynamic">
          <div class="user-dynamic-item" @click="getUserVideos">
            <span>作品</span>
            <p>{{ userInfo.videosNum || 0 }}</p>
          </div>
          <div class="user-dynamic-item" @click="getUserDynamicVideos">
            <span>动态</span>
            <p>{{ userInfo.videosNum || 0 }}</p>
          </div>
          <div class="user-dynamic-item" @click="getUserLikes">
            <span>喜欢</span>
            <p>{{ userInfo.likesNum || 0 }}</p>
          </div>
          <!-- 标签切换条 -->
          <div class="user-follow-line" :style="{ left: indexUser * 3.3333 + 'rem' }"></div>
        </div>

        <!-- 内容展示区 -->
        <div class="user-content" v-if="indexUser === 0 || indexUser === 2">
          <UserContentGrid :gridArr="indexUser === 0 ? userVideos : userLikes" @play="$emit('play-content', $event)" />
        </div>
        <div class="user-dynamic-list" v-if="indexUser === 1">
          <UserDynamicCard :currentVideo="userDynamicVideos" />
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, watch, onMounted, onUnmounted } from 'vue';
import { useUserStore } from "@/store/modules/user/user";
import { initUserInfo } from '@/service/userService';
import { getUserVideosAPI, getUserDynamicVideosAPI, getUserLikedVideosAPI } from '@/api/user/user';
import UserContentGrid from './UserContentGrid.vue';
import UserDynamicCard from './UserDynamicCard.vue';
import { useFingerSwipe } from '../../hooks/useFingerSwipe';

// 组件接收的参数（userId 可选，默认用 store 中的用户 ID）
const props = defineProps({
  userId: {
    type: [String, Number],
    default: null // 默认值在 setup 中处理
  },
  // 图片基础路径（方便切换环境）
  imgBaseUrl: {
    type: String,
    default: 'http://43.138.15.137:3000'
  },
  // 默认背景图（无自定义背景时使用）
  defaultBgImg: {
    type: String,
    default: 'http://43.138.15.137/assets/img/281578538336_.pic_hd.e816ad71.jpg'
  },
  // 默认头像（无自定义头像时使用）
  defaultAvatar: {
    type: String,
    default: 'https://img.example.com/default-avatar.png'
  }
});

// 组件内部状态
const userStore = useUserStore();
const userInfo = ref({}); // 用户信息
const userVideos = ref([]); // 作品列表
const userDynamicVideos = ref([]); // 动态列表
const userLikes = ref([]); // 喜欢列表
const indexUser = ref(null); // 当前激活的标签索引
const isMenuActive = ref(false); // 菜单是否显示
const userBoxRef = ref(null); // 主容器引用
const bgScale = ref(1); // 背景图缩放比例
const swipeY = ref(0); // 滑动距离

// 处理默认 userId（优先用 props，否则用 store 中的）
const currentUserId = ref(props.userId || userStore.userInfo.userId);

// 初始化滑动缩放逻辑
const initSwipe = () => {
  if (!userBoxRef.value) return;
  const { y } = useFingerSwipe(userBoxRef.value);
  watch(y, (newY) => {
    if (newY < 0) {
      swipeY.value = newY;
    }
    if (newY >= 0) {
      bgScale.value = 1 + newY * 0.01;
      if (bgScale.value > 1.5) bgScale.value = 1.5; // 限制最大缩放
    } else {
      bgScale.value = 1; // 下拉时恢复
    }
  });
};

// 获取用户信息
const fetchUserInfo = async () => {
  if (!currentUserId.value) return;
  const res = await initUserInfo(currentUserId.value);
  userInfo.value = res;
};

// 获取用户作品列表
const getUserVideos = async () => {
  if (indexUser.value === 0) return;
  const res = await getUserVideosAPI(currentUserId.value, 1);
  if (res.code === 200) {
    userVideos.value = res.data;
  }
  indexUser.value = 0;
};

// 获取用户动态视频列表
const getUserDynamicVideos = async () => {
  if (indexUser.value === 1) return;
  const res = await getUserDynamicVideosAPI(currentUserId.value, 1);
  if (res.code === 200) {
    userDynamicVideos.value = res.data;
  }
  indexUser.value = 1;
};

// 获取用户喜欢列表
const getUserLikes = async () => {
  if (indexUser.value === 2) return;
  const res = await getUserLikedVideosAPI(currentUserId.value, 1);
  if (res.code === 200) {
    userLikes.value = res.data;
  }
  indexUser.value = 2;
};

// 监听 userId 变化（如从查看自己切换到查看他人）
watch(currentUserId, async (newId) => {
  if (newId) {
    await fetchUserInfo();
    await getUserVideos(); // 重新加载内容
  }
});

onMounted(async () => {
  await fetchUserInfo();
  await getUserVideos(); // 初始加载作品
  initSwipe();
  document.body.style.overflow = 'hidden'; // 禁止页面滚动
});

onUnmounted(() => {
  document.body.style.overflow = 'auto'; // 恢复滚动
});

// 暴露事件：菜单点击、内容播放、关注/粉丝点击等
defineEmits([
  'menu-click', // 菜单点击（edit/logout）
  'play-content', // 内容播放
  'click-follows', // 点击关注
  'click-fans' // 点击粉丝
]);
</script>
